class Vue {
    constructor(options){ 
        this.$options = options
        this._data = options.data
        this.initData()
    }

    initData() {
        let data = this._data
        let keys = Object.keys(data)
        // 在此处实现数据代理，将data上的数据代理到 Vue 新建的实例上
        for(let i=0;i<keys.length;i++ ){
            Object.defineProperty(this, keys[i], {
                enumerable: true,
                configurable: true,
                get() {
                    return data[keys[i]]
                },
                set(value) {
                    data[keys[i]] = value
                }
            })
        }
        observe(data)
    }
}

function observe(data) {
    let type =  Object.prototype.toString.call(data)
    if(type !== '[object Object]' && type !== '[object Array]') return
    new Observer(data)
}

// 每一条属性！！！！
function defineReactive(obj, key, value) {
    observe(obj[key])
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            return value
        },
        set(val) {
            if(val === value) return
            console.log('触发依赖');
            value = val
        }
    })
}

class Observer {
    constructor(data) {
        this.walk(data)
    }

    walk(data) {
        let keys = Object.keys(data)
        for(let i=0;i<keys.length;i++ ){
            defineReactive(data, keys[i], data[keys[i]])
        }
    }
}